﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="News.aspx.cs" Inherits="News" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <%--必須參考--%>

    <%--必須參考--%>
    <style>
        .pagination {
            margin:0px;
        }
        #dnav {
            height:45px;
    text-align:center;
    cursor: pointer;
    /*margin-top:-18px;*/
        }
        .table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
  background-color: #eee;
}
        .table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color:#66CCFF;
  color:#fff;
}
    
        

            #tablenews th {
                background:#555555;
                color:#fff;
                /*border: 1px solid #000000;*/
                text-align: center;
                /*padding-top:5px;
                padding-bottom:5px;*/
            }
            #tablenews td {
                /*border: 1px solid #ff0000;*/
                text-align: center;
            }

        #nav {
            height: 20px;
            text-align: center;
        }

        #tablenewscontainer {
            width: 70%;
            margin: 0 auto;
            /*height: 50px;*/
            /*border: 1px solid #000000;*/
        }

            

        .tablenewscontainer-title {
            text-align:right;
            /*border-bottom:1px solid #666;*/
            padding-bottom:15px;
        }
        .tablenewscontainer-date {
            text-align:right;
            border-bottom:1px solid #666;
        }
        .tablenewscontainer-content {
            padding-top:10px;
        }
       
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">



    <div class="news-page-container">
        <div class="news-page-content">
            <div class="news-page-tile">
                <span href="#"><i class="glyphicon glyphicon-bullhorn"></i>&nbsp;最新消息</span>
                  <%--<h4><i class="glyphicon glyphicon-star"></i>&nbsp;最新消息</h4>--%>
            </div>
            <div class="news-container">
                <div class="news">
                    <div class="news-container">
                        <div class="news">
                            <%--news--%>
                            <br />
                            <table id="tablenews" class="table table-striped table-bordered table-hover ">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>標題</th>
                                        <th id="tdlink">內容
                                        </th>
                                    </tr>
                                </thead>
                            </table>

                        </div>

                        <%--分頁符號--%>
                        <div id="dnav">
                            <ul id="nav" class="pagination pagination-sm"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="black-container">
        <div class="news-page-container">
            <div class="news-page-content">
                <div class="news-page-tile">
                        
                    <div class="jumbotron">
                        <div class="container">
                            <table id="tablenewscontainer">
                               

                            </table>

                        </div>
                    </div>
                  </div>
                 
            </div>
        </div>
    </div>


    <%--客製參考--%>
    <link href="Content/News.css" rel="stylesheet" />
    <script src="Scripts/News.js"></script>
    <%--客製參考--%>
    <script>
        /*標題點下去看到細節*/
       


        /*分頁*/
        $(function () {
            NewsRead(1)
            UnBoxingArticalNum("navItem1");
            $("#tablenews").on("click", "tr", function () {
                Newsload($(this));
            })
        });
        function UnBoxingArticalNum(Currentlypage) {/*取資料筆數*/
            $.ajax({
                url: "./Handler/HandlerNews.ashx"
                , type: "post"
                , data: "type=2"
                , success: function (data) {
                    $.each(data, function (name, value) {
                        $.each(value, function () {
                            /*回傳===========================================*/
                            var Currentlypage2 = parseInt(Currentlypage.substr(7))//Currentlypage目前所在頁數,避免傳字串parseInt()
                            var rowsPage = 10;  // 每頁有幾列
                            var totalRows = this.num; // 取得表格共幾列
                            var ItemNum = 5;//一定要奇數,最小3
                            var numPages = Math.floor(totalRows / rowsPage);// 計算頁數
                            var mod = totalRows % rowsPage; // 餘數
                            if (mod > 0) { numPages++; } // 不能整除
                            if (Currentlypage2 == 0) { Currentlypage2 = numPages }//最後一頁處理
                            if (Currentlypage2 == -1) { Currentlypage2 = 1 }//第一頁處理
                            if (Currentlypage2 - (ItemNum - 1) / 2 > 0) {
                                var StartItem = Currentlypage2 - (ItemNum - 1) / 2;
                            }
                            else {
                                var StartItem = 1;
                            }
                            if ((Currentlypage2 + (ItemNum - 1) / 2 <= numPages) && ((Currentlypage2 + (ItemNum - 1) / 2) > 0)) {
                                var EndItem = Currentlypage2 + (ItemNum - 1) / 2;
                            }
                            else {
                                var EndItem = numPages;
                            }
                            $('#nav').append('<li id=navItem-' + 1 + '>'+'<a>'+'首頁'+'</a>'+'</li>').fadeIn(500);
                            for (i = StartItem; i <= EndItem; i++) {
                                $('#nav').append('<li id=navItem' + i + '>' +'<a>'+ i +'</a>'+ '</li>').fadeIn(500);
                            }
                            $('#nav').append('<li id=navItem' + 0 + '>'+'<a>'+'最後一頁'+'</a>'+'</span> ').fadeIn(500);
                            $("#navItem" + Currentlypage2).css('color', 'red');
                            // 按下頁碼超連結
                            $('#nav li').click(function (event) {
                                var pagenum = this.id.substr(7);
                                if (pagenum == 0) { pagenum = numPages }//最後一頁處理
                                if (pagenum == -1) { pagenum = 1 }//第一頁處理
                                $("#tablenews tbody").html("");
                                NewsRead( pagenum);
                                $('#nav').hide().html("");
                                UnBoxingArticalNum(this.id);
                                return false;
                            });
                            /*回傳===========================================*/
                        });
                    });
                    /*successEnd===========================================*/
                }
            });
        }
        /*讀入資料標題*/
        function NewsRead(Target) {
            $.ajax({
                url: "./Handler/HandlerNews.ashx"
          , type: "post"
          , data: "type=1"
        + "&PageNum=" + Target //做分頁 之後要改成PageNum
    , success: function (data) {
        var content = "";
        $.each(data, function (name, value) {
            $.each(value, function () {
                /*回傳===========================================*/
                //$(tablenews).append("<tr><td>@date</td><td>@title</td><td>@content</td></tr>")

                $("#tablenews").hide().append("<tr id='titleid" + this.nid + "'><td>" + this.date + "</td><td>" + this.title + "</td><td >" + this.content.substr(0, 20) + "</td></tr>").fadeIn(500)

                /*回傳===========================================*/
            });
        });
        /*successEnd===========================================*/
    }
            });
        }
        /*讀入資料內容*/
        function Newsload(elem)
        {
            var $this = elem;
            var id = $this.attr('id').substr(7);
            $.ajax({
                url: "./Handler/HandlerNews.ashx"
                , type: "post"
                , data: "type=3"
                + "&content=" + id //做分頁 之後要改成PageNum
                , success: function (data) {
                var content = "";
             $.each(data, function (name, value) {
             $.each(value, function () {
                 /*回傳===========================================*/
                 

                 //$("#tablenewscontainer").html(" <tr><td> 內容</td><td>日期</td></tr><tr><td>" + this.content + "</td><td>" + this.date + "</td></tr>");
                 $("#tablenewscontainer").html(" <h2 class='tablenewscontainer-title'>" + this.title + "</h2><p class='tablenewscontainer-date'>" + this.date + "</p><p class='tablenewscontainer-content'>" + this.content + "</p>");
                 //顯示內容明細
                 $('.black-container').fadeTo(500, 1);

                 /*回傳===========================================*/
             });
         });
         /*successEnd===========================================*/
     }
            });
        }

    </script>



    












    <script>
     // js 測試區
     // btn登入鍵click event. show預覽畫面
     $('#btnPreview').click(function () {
         $('body').css('overflow', 'hidden');
         $('.black-container').fadeTo(500, 1).show();
         // 先將body拉霸隱藏 才顯示預覽畫面(包含預覽畫面的拉霸)
     });

     // btn取消&表單外部黑色屏蔽click event
     $('.black-container').click(function () {
         $('.black-container').fadeTo(500, 0, hideBlackContainer);
     });

     function hideBlackContainer() {
         $('.black-container').hide();
         $('body').css('overflow', 'scroll');
         // 當預覽黑幕全部消失 才顯示body的拉霸
     };

     $('.news-page-content').click(function (event) {
         event.stopPropagation();
     })

    

</script>

</asp:Content>

